import {onMounted, ref} from 'vue'
import { useTableData } from "../../hooks/table/useTableData.js";
import { orderDetailQueryOne,orderDetailChange } from '../../api/order.js'
export function useOrderTableData () {
    let isShowWindow = ref(false)
   const columns = ref([
       {
           label: '订单号',
           prop: 'number',
           align: 'center',
           width: 200,
       },
       {
           label: '订单状态',
           prop: 'status',
           align: 'center',
           isSlot: true,
       },
       {
           label: '用户',
           prop: 'consignee',
           align: 'center',
       },
       {
           label: '手机号',
           prop: 'phone',
           align: 'center',
       },
       {
           label: '地址',
           prop: 'address',
           align: 'center',
       },
       {
           label: '下单时间',
           prop: 'orderTime',
           align: 'center',
           isSlot: true,
       },
       {
           label: '实收金额',
           prop: 'amount',
           align: 'center',
       },
       {
           label: '操作',
           prop: 'general',
           align: 'center',
           isSlot: true,
       }
   ])
    let formProps = ref([
        {
            label: '订单号：',
            key: 'number',
            value: null
        },
        {
            label: '订单状态：',
            key: 'status',
            value: null
        },
        {
            label: '收货人：',
            key: 'consignee',
            value: null
        },
        {
            label: '联系电话：',
            key: 'phone',
            value: null
        },
        {
            label: '地址：',
            key: 'address',
            value: null
        },
        {
            label: '支付金额：',
            key: 'amount',
            value: null
        },{
            label: '下单时间：',
            key: 'orderTime',
            value: null
        }
    ])
    let winTitle = ref(null)
    const { tableData, getTableData,total , sizeChange, currentChange, prevClick, nextClick, loading }  = useTableData('/orders/query')
    async function lookOrder (row) {
        isShowWindow.value = true
        winTitle.value = '订单详情'
        const { data: { data } } = await orderDetailQueryOne(row.number)
       formProps.value.forEach((item,index) => {
           if (item.key === 'status') {
               item.value = data[item.key] === 1 ? '待付款' : data[item.key] === 2 ? '待派送' : data[item.key] === 3 ? '已派送' : data[item.key] === 4 ? '已完成': '已取消'
           } else {
               item.value = data[item.key]
           }
       })
    }
    // 修改订单状态
    async function changeOrderStatus (row) {
      await orderDetailChange({ number: row.number, status: row.status === 2 ? 3 : 4 })
      await getTableData()``
    }
    onMounted(() => {
        getTableData().then(_ => {})
    })
    return {
        columns,
        tableData,
        total ,
        sizeChange,
        currentChange,
        prevClick,
        nextClick,
        getTableData,
        isShowWindow,
        winTitle,
        lookOrder,
        changeOrderStatus,
        formProps,
        loading
    }
}
